import Selecto from 'selecto';
import Moveable from 'moveable';
const frameMap = new Map();
var targets: any[] = [];
/**
 *画布 包含moveable、selecto
 * @class canvas
 */
export default class canvas {
  static create(designView: string, widgetList: string, widget: string) {
    const container: HTMLElement = document.querySelector(designView)
    const selecto = new Selecto({
      container: container,
      // dragContainer: '#design',
      selectableTargets: [`${widgetList} ${widget}`],
      hitRate: 0,
      selectByClick: true,
      // 在widget上是否可以进行区域选择
      selectFromInside: false,
      toggleContinueSelect: ['shift'],
      ratio: 0
    });

    const moveable = new Moveable(container, {
      draggable: true,
      // 参考线： https://daybrush.com/moveable/storybook/?path=/story/use-snap-bounds-with-ables--snap-guidelines-elements
      snappable: false
    }).on('clickGroup', e => {
      selecto.clickTarget(e.inputEvent, e.inputTarget);
    }).on('dragStart', e => {
      const target = e.target;

      if (!frameMap.has(target)) {
        frameMap.set(target, {
          translate: [0, 0]
        });
      }
      const frame = frameMap.get(target);

      e.set(frame.translate);
    }).on('drag', e => {
      const target = e.target;
      const frame = frameMap.get(target);

      frame.translate = e.beforeTranslate;
      target.style.transform = `translate(${frame.translate[0]}px, ${frame.translate[1]}px)`;
    }).on('dragGroupStart', e => {
      e.events.forEach(ev => {
        const target = ev.target;

        if (!frameMap.has(target)) {
          frameMap.set(target, {
            translate: [0, 0]
          });
        }
        const frame = frameMap.get(target);

        ev.set(frame.translate);
      });
    }).on('dragGroup', e => {
      e.events.forEach(ev => {
        const target = ev.target;
        const frame = frameMap.get(target);

        frame.translate = ev.beforeTranslate;
        target.style.transform = `translate(${frame.translate[0]}px, ${frame.translate[1]}px)`;
      });
    });


    selecto.on('dragStart', e => {
      const target = e.inputEvent.target;
      // let isWidget = target!.classList.contains('widget')
      console.log('开始', target, target!.classList.contains('widget'))
      if (
          moveable.isMoveableElement(target) 
          || targets.some(t => t === target || t.contains(target))
      ) {
        e.stop();
      }
      // if(isWidget){
      //   moveable.target = targets;
      // }
    })
    // .on('select', e => {
    //   console.log('select', e.selected)
    //   targets = e.selected;
    //   moveable.target = targets;
    // })
    .on('selectEnd', e => {
      targets = e.selected;
      // @ts-ignore
      moveable.target = targets;

      if (e.isDragStart) {
        e.inputEvent.preventDefault();

        setTimeout(() => {
          moveable.dragStart(e.inputEvent);
        });
      }
    });
  }
}